<template>
	<view>
		<!-- 左右展示栏 -->
		<u-section class="u-section" color='#2B87FF' title="话题" sub-title="点击查看" @click="getusertitle(0)"></u-section>
        <text v-if="show==0" style="color: #2979FF;" @click="show=3">收起</text>
		<!-- 话题收藏 -->
		<u-card class="TopicCenter" v-if="show==0" v-for="item in usertitle" :key="item.aid">
			<view class="" slot="body">
				<view class="u-body-item  u-flex">
					<u-avatar :src="item.avatar" :size="80" :show-sex='true' mode="circle"
						:sex-icon="item.gender==1?'man': item.gender==0? 'woman':''" :show-level='true'></u-avatar>
					<view class="u-line-1 u-m-l-15">
						<view class="u-body-item-title u-line-1">发布时间:{{item.artCreateTime}}</view>
						<view class="u-body-item-title u-line-1">收藏时间:{{item.collectCreateTime}}</view>
					</view>

				</view>
				<view class="u-body-item">
					{{item.title}}
				</view>
				<view class="u-body-item ">
					<image @tap='preAvatar(item.imgUrl)' :src="item.imgUrl" mode="aspectFit"
						style="width:500rpx;height: 400rpx;"></image>
				</view>
				<u-read-more :show-height="200" ref="uReadMore" :toggle="true">
					<!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 -->
					<!-- #ifdef MP-ALIPAY -->
					<u-parse :html="item.body"></u-parse>
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<rich-text :nodes="item.body"></rich-text>
					<!-- #endif -->
				</u-read-more>

			</view>

		</u-card>
		<u-loadmore v-if="show==0" status="loadmore" />
		<u-section class="u-section" color='#2B87FF' title="话题分类" sub-title="点击查看" @click="getusertitle(2)"></u-section>
<text v-if="show==2" style="color: #2979FF;" @click="show=3">收起</text>
             <!-- 话题分类收藏 -->
		<view v-if="show==2" :animation='animationData' v-for="(item,index) in usertitle" :key='index'>
			<view class="u-body-item u-flex u-col-center DetailMsg">
				<view class="DetailPing" style="font-size: 20rpx;">收藏时间:{{item.collectCreateTime}}</view>
				<u-avatar :src="item.avatar" class="mt-15 " :size="80" mode="circle"></u-avatar>
				<view class="u-line-1 u-m-l-15">
					<view class="u-body-item-title u-line-1">
						<u-button type="success" size="mini" :plain="true">{{item.title}}</u-button>
					</view>
					<view class="u-body-item-title u-line-1" style="width:60vw ;">{{item.body}}</view>
				</view>

			</view>
			<view class="width-100 u-text-center">
				<image v-if="item.imgUrl" @tap='preAvatar(item.imgUrl)' :src="item.imgUrl" mode="aspectFit"
					style="width:300rpx;height: 200rpx;"></image>
			</view>
		</view>
		<u-loadmore v-if="show==2" status="loadmore" />
		<u-section class="u-section" color='#2B87FF' title="评论" sub-title="点击查看" @click="getusertitle(1)"></u-section>
		<text v-if="show==1" style="color: #2979FF;" @click="show=3">收起</text>
		
		<!-- 评论收藏 -->
		<view v-if="show==1" v-for="(item,index) in usertitle" :key='index'>
			<view class="u-body-item u-flex u-col-center DetailMsg">
				<u-avatar :src="item.avatar" class="mt-15 " :size="80" mode="circle"></u-avatar>
				<view class="u-line-1 u-m-l-15 u-m-t-10">
					<view class="u-body-item-title u-line-1">发布时间:{{item.createTime}}</view>
					<view class="u-body-item-title u-line-1">收藏时间:{{item.collectCreateTime}}</view>			
				</view>
                   
			</view>
			<view class="u-p-30">{{item.body}}</view>
			<view class="width-100 u-text-center">
				<image v-if="item.imgUrl" @tap='preAvatar(item.imgUrl)' :src="item.imgUrl" mode="aspectFit"
					style="width:300rpx;height: 200rpx;"></image>
			</view>
		</view>
		<u-loadmore v-if="show==1" status="loadmore" />
	</view>
</template>

<script>
	import {
		mixins
	} from '@/public.js'
	export default {
		name: "myCollection",
		mixins: [mixins],
		onUnload() {
			this.animationData={}
		},
		data() {
			return {
				usertitle: [],
				show: 3,
				animationData:{},
				
			};
		},
		methods: {
			getusertitle(value) {
				this.show = value
				//let animation=uni.createAnimation()
				//animation.translateY(1000).step({duration:3000})
				//this.animationData=animation.export()
				//根据类别获得收藏
				this._m_getMyCollection({
					type: value
				})

			},
			preAvatar(avatar) {//图片全屏预览
				wx.previewImage({
					current: '', // 当前显示图片的 http 链接
					urls: [avatar] // 需要预览的图片 http 链接列表
				})
			},

		}
	}
</script>

<style lang="scss">
	.u-section {
		height: 50rpx !important;
		margin-top: 20rpx;
		display: block;
	}

	.DetailMsg {
		position: relative;

		.DetailPing {
			position: absolute;
			width: 100px;
			top: 30rpx;
			right: 50rpx;
		}

		.detailFoot {
			position: fixed;
			bottom: 0;
		}

	}
</style>
